import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class SlidablePage extends StatefulWidget {
  const SlidablePage({Key? key}) : super(key: key);

  @override
  State<SlidablePage> createState() => _SlidablePageState();
}
// slidable 是一个处理侧滑菜单效果的组件
class _SlidablePageState extends State<SlidablePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("侧边删除"),
      ),
     body: ListView.builder(
       itemBuilder: (BuildContext context,int index){
         return buildItem();
       }),
    
  
  );
}

Widget buildItem(){
  return Slidable(
    //配置的是左侧actions
    // secondaryActions 右侧
    secondaryActions: [
      SlideAction(
        child:Container(
          color: Colors.blueGrey,
          child: Text("测试")
        )
        ),
        SlideAction(color: Colors.red,child: Text("测试2"),),
        IconSlideAction(
          icon: Icons.add,
          color: Colors.red,
          onTap: (){
            print("点击了add");
            // 主动关闭
            Slidable.of(context)?.close();
          },
          closeOnTap: false,
        ),
        IconSlideAction(
          icon: Icons.home,
          color: Colors.orange,
          foregroundColor: Colors.white,
          onTap: (){
            print("点击了home");
          },
          //点击 false 不关闭 ，true关闭
          closeOnTap: false,
        )
    ],
    //滑动的交互效果
      // SlidableDrawerActionPane 从左逐渐压缩进来 折叠
      // SlidableScrollActionPane 相当于是从屏幕左侧滑动进来
      // SlidableBehindActionPane 直接显示在背面
      // SlidableStrechActionPane 从左侧压缩滑动进来
    actionPane: SlidableDrawerActionPane(),
    child: buildContainer(),
  );
}

Container buildContainer(){
  return Container(
    color: Colors.white,
    padding: EdgeInsets.all(10),
    child: Row(
      children: [
        // 左边的图片
        Image.asset("assets/germany.png",width: 100,),
        SizedBox(width: 16),
        // 右侧的文字
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "学习fluter",
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w500
                ), 
              ),
              Text(
                "一个爱写代码 的程序员 也会早起那么一点点",
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w400
                ),
              )
            ],

          )
        )
      ],
    ),
    margin: EdgeInsets.only(top: 10),

  );
}
}